<template>
  <view class="goods-stock">
    <Form title="库存(不限库存可不填写)">
      <FormItem :disabled="disabled" label="库存">
        <text v-if="disabled">{{ disabledStock }}</text>
        <input v-else type="number" v-model.number="formData.stock" :disabled="disabled" placeholder="请填写商品库存" @blur="handleBlurStock" />
      </FormItem>
    </Form>
  </view>
</template>

<script>
import Form from "../../../components/public/Form/index.vue";
import FormItem from "../../../components/public/FormItem/index.vue";
import { mapState, mapMutations } from "vuex";
import { maxStock, stockMessage } from "../../../utils/validator";
export default {
  components: { Form, FormItem },
  props: {
    mode: {
      type: String,
      default: () => "add" // add modify
    }
  },
  data() {
    return {
      formData: {
        stock: null
      }
    };
  },
  computed: {
    ...mapState({
      goodsInfo: state => state.goods.goodsInfo
    }),
    stock() {
      let stock = null;
      if (this.goodsInfo.skuList) {
        this.goodsInfo.skuList.forEach(v => {
          if (v && !this.$isNull(v.stock))
            stock = Number(stock) + Number(v.stock);
        });
      }
      return stock;
    },
    disabledStock() {
      return this.$isNull(this.formData.stock)
        ? "不限库存"
        : this.formData.stock;
    },
    disabled() {
      // 当存在多个sku时，以sku中的stock为准
      return (this.goodsInfo &&
        this.goodsInfo.skuList &&
        this.goodsInfo.skuList.length > 1) ||
        (this.goodsInfo &&
          this.goodsInfo.skuList &&
          this.goodsInfo.skuList[0] &&
          this.goodsInfo.skuList[0].spec)
        ? true
        : false;
    }
  },
  watch: {
    ["formData.stock"](val) {
      this.SET_GOODS_INFO(this.formData);
    },
    stock(val) {
      this.formData.stock = val;
    }
  },
  created() {
    if (this.goodsInfo.id && this.mode == "modify") this.init();
  },
  methods: {
    ...mapMutations({
      SET_GOODS_INFO: "SET_GOODS_INFO"
    }),
    init() {
      // if (
      //   this.goodsInfo.skuList[0] &&
      //   this.goodsInfo.skuList[0].spec === null
      // ) {
      //   this.formData.stock = this.goodsInfo.skuList[0].stock;
      // }
      if (this.goodsInfo.skuList) {
        this.goodsInfo.skuList.forEach(v => {
          if (!this.$isNull(v.stock))
            this.formData.stock = this.formData.stock + v.stock;
        });
      }
      // for (const key in this.formData) {
      //   this.formData[key] = this.goodsInfo[key];
      // }
    },
    getData() {
      return this.formData;
    },
    handleBlurStock() {
      if (this.formData.stock > maxStock) {
        uni.showToast({
          icon: "none",
          title: stockMessage
        });
        this.formData.stock = maxStock;
      }
      if (this.formData.stock || this.formData.stock === 0) {
        this.formData.stock = Number(this.formData.stock.toFixed(0));
      } else {
        if (this.$isNull(this.formData.stock)) this.formData.stock = null;
      }
    }
  }
};
</script>

<style scoped lang="scss">
// .goods-stock {
// }
</style>
